``<template>
  <el-select v-model="value" multiple clearable collapse-tags placeholder="请选择车牌查看实时定位" popper-class="custom-header"
    :max-collapse-tags="1" style="width: 240px" @change="handleChange">
    <template #header>
      <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">所有</el-checkbox>
    </template>
    <el-option v-for="(item, index) in cities" :key="item.value" :label="item.label" :value="item.value">
      <el-tag :color="colors[index]" style="margin-right: 8px" size="small" />
      <span :style="{ color: colors[index] }">{{ item.label }}</span>
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { CheckboxValueType } from "element-plus";
import setAntPathPolyline from "@/tools/setAntPathPolyline.ts";
import colors from "@/tools/colorConfig.ts";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore();

const checkAll = ref(false);
const indeterminate = ref(false);
const value = ref<CheckboxValueType[]>([]);
const cities = ref([
  {
    value: "Beijing",
    label: "湘A 123456",
  },
  {
    value: "Shanghai",
    label: "湘A 123456",
  },
  {
    value: "Nanjing",
    label: "湘A 123456",
  },
  {
    value: "Chengdu",
    label: "湘A 123456",
  },
  {
    value: "Shenzhen",
    label: "湘A 123456",
  },
  {
    value: "Guangzhou",
    label: "湘A 123456",
  },
]);

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === cities.value.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false;
  if (val) {
    value.value = cities.value.map((_) => _.value);
    mapStore.licensePlate = cities.value.map((_) => _.value);
  } else {
    value.value = [];
    mapStore.licensePlate = [];
  }

  console.log(value.value);

  setAntPathPolyline(mapStore.map, ["test"]);

  mapStore.map.eachLayer(function (layer) {
    layer.off("zoomend");
  });

  mapStore.map.on("zoomend", function (e) {
    setAntPathPolyline(mapStore.map, ["test"]);
  });
};

const handleChange = (val: CheckboxValueType) => {
  console.log("选中的值：", val);
  mapStore.licensePlate = val;

  // 在这里处理选项变化的逻辑
  setAntPathPolyline(mapStore.map, ["test"]);

  // 清除事件及注册事件
  mapStore.map.eachLayer(function (layer) {
    layer.off("zoomend");
  });

  mapStore.map.on("zoomend", function (e) {
    setAntPathPolyline(mapStore.map, ["test"]);
  });
};
</script>

<style scoped>
.custom-header .el-checkbox {
  display: flex;
  height: unset;
}

.el-tag {
  --el-tag-border-radius: 0 !important;
}

.el-tag--small {
  height: 16px !important;
}
</style>
